<?php 
	$this->Html->css(array('select2', 'font', 'app.v2'), array('inline' => false));
	$this->Html->script(array(
	'app.v2', 'fuelux/fuelux', 'datepicker/bootstrap-datepicker',
	'slider/bootstrap-slider', 'file-input/bootstrap.file-input',
	'combodate/moment.min', 'combodate/combodate', 'parsley/parsley.min',
	'select2/select2.min'), array('inline' => false));
	$this->assign('button_save_template','<a href="javascript:void(0)" class="btn btn-sm btn-info" onclick="ShowModel();"><i class="fa fa-fw fa-plus"></i> NEW TEMPLATE</a>');
?>

<section id="content">
	<section class="main padder">
		<div class="clearfix">
			<h4><i class="fa fa-edit"></i><?php echo __('Add Category'); ?></h4>
		</div>
		<div class="row">
			<div class="col-sm-6">
				<section class="panel">
					<div class="panel-body">
						<?php 
							echo $this->Form->create('Category', array(
							'inputDefaults' => array(
								'label' => false,
								'div'   => false
							),'class' => 'form-horizontal', 'data-validate' => 'parsley'));
						?>	
							<!--
							<div class="form-group">
								<label class="col-lg-3 control-label">Photo</label>
								<div class="col-lg-9 media">
									<div class="bg-light pull-left text-center media-large thumb-large"><i class="fa fa-user inline fa fa-light fa fa-3x m-t-large m-b-large"></i></div>
									<div class="media-body">
										<input type="file" name="file" title="Change" class="btn btn-sm btn-info m-b-small"><br>
										<button class="btn btn-sm btn-default">Delete</button>
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-3 control-label">Email</label>
								<div class="col-lg-8">
									<input type="text" name="email" placeholder="test@example.com" class="bg-focus form-control" data-required="true" data-type="email">
								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-3 control-label">Password</label>
								<div class="col-lg-8">
									<input type="password" name="password" placeholder="Password" class="bg-focus form-control">
									<div class="line line-dashed m-t-large"></div>
								</div>
							</div>
							-->
							<div class="form-group">
								<label class="col-lg-3 control-label"><?php echo __('Name'); ?></label>
								<div class="col-lg-8">
									<?php echo $this->Form->input('name', array('class' => 'form-control', 'data-required' => true, 'placeholder' => 'World Cup 2014')); ?>
								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-3 control-label"><?php echo __('Parent'); ?></label>
								<div class="col-lg-4">
									<!--
									<select name="account" class="form-control">
										<option value="1">Editor</option>
										<option value="0">Admin</option>
									</select>
									-->
									<?php echo $this->Form->input('parent_id',array('class' => 'form-control','type'=>'select','options'=>$list_cat,'empty'=>'--Choose parent--'));?>
								</div>
							</div>
							<div class="form-group">
								<label class="col-lg-3 control-label"><?php echo __('Descriptions'); ?></label>
								<div class="col-lg-8">
									<?php echo $this->Form->input('description', array('data-rangelength' => '[20,200]','rows' => 5,'data-trigger' => 'keyup','class' => 'form-control', 'placeholder' => 'Descriptions')); ?>
								</div>
							</div>
							<!--
							<div class="form-group">
								<label class="col-lg-3 control-label">Registered</label>
								<div class="col-lg-9">
									<input type="text" class="combodate form-control" data-format="DD-MM-YYYY" data-template="D MMM YYYY" name="datetime" value="21-12-2012">
								</div>
							</div>
							-->
							<div class="form-group">
								<div class="col-lg-9 col-lg-offset-3">
									<button type="submit" class="btn btn-white">Cancel</button>
									<?php echo $this->Form->submit('Save changes',array(
											'class' => 'btn btn-primary',
											'div' => false
										))
									?>
								</div>
							</div>
						<?php echo $this->Form->end(); ?>
					</div>
				</section>
				<section class="panel">
					<div class="wizard clearfix" id="form-wizard">
						<ul class="steps">
							<li data-target="#step1" class="active"><span class="badge badge-info">1</span>Step 1</li>
							<li data-target="#step2"><span class="badge">2</span>Step 2</li>
							<li data-target="#step3"><span class="badge">3</span>Step 3</li>
						</ul>
					</div>
					<div class="step-content">
						<form>
							<div class="step-pane active" id="step1">
								<p>Your website:</p>
								<input type="text" class="input-sm form-control" data-trigger="change" data-required="true" data-type="url" placeholder="website">
							</div>
							<div class="step-pane" id="step2">
								<p>Your email:</p>
								<input type="text" class="input-sm form-control" data-trigger="change" data-required="true" data-type="email" placeholder="email address">
							</div>
							<div class="step-pane" id="step3">This is step 3</div>
						</form>
						<div class="actions m-t">
							<button type="button" class="btn btn-white btn-sm btn-prev" data-target="#form-wizard" data-wizard="previous" disabled="disabled">Prev</button>
							<button type="button" class="btn btn-white btn-sm btn-next" data-target="#form-wizard" data-wizard="next" data-last="Finish">Next</button>
						</div>
					</div>
				</section>
			</div>
			<div class="col-sm-6">
				<div class="panel">
					<div class="clearfix panel-body">
						<div>Radio and Checkbox (Retina display) </div>
						<div class="row">
							<div class="col-lg-6">
								<!-- radio -->
								<div class="radio">
									<label class="radio-custom">
										<input type="radio" name="radio" checked="checked">
										<i class="fa fa-circle-o"></i>Item one checked
									</label>
								</div>
								<div class="radio">
									<label class="radio-custom">
										<input type="radio" name="radio">
										<i class="fa fa-circle-o"></i>Item two
									</label>
								</div>
								<div class="radio">
									<label class="radio-custom">
										<input type="radio" name="radio" disabled="disabled">
										<i class="fa fa-circle-o"></i>Item three disabled
									</label>
								</div>
								<div class="radio">
									<label class="radio-custom">
										<input type="radio" checked="checked" disabled="disabled">
										<i class="fa fa-circle-o"></i>Item four checked disabled
									</label>
								</div>
							</div>
							<div class="col-lg-6">
								<!-- checkbox -->
								<div class="checkbox">
									<label class="checkbox-custom">
										<input type="checkbox" name="checkboxA" checked="checked">
										<i class="fa fa-check-square-o"></i>Item one checked
									</label>
								</div>
								<div class="checkbox">
									<label class="checkbox-custom">
										<input type="checkbox" name="checkboxB" id="2">
										<i class="fa fa-check-square-o"></i>Item two
									</label>
								</div>
								<div class="checkbox">
									<label class="checkbox-custom">
										<input type="checkbox" name="checkboxC" disabled="disabled">
										<i class="fa fa-check-square-o"></i>Item three disabled
									</label>
								</div>
								<div class="checkbox">
									<label class="checkbox-custom">
										<input type="checkbox" name="checkboxD" checked="checked" disabled="disabled">
										<i class="fa fa-check-square-o"></i>Item four checked disabled
									</label>
								</div>
							</div>
						</div>
						<div>
							<p>Combobox</p>
							<div id="myCombobox" class="input-group dropdown combobox m-b">
								<input class="input-sm form-control" name="combobox" type="text">
								<div class="input-group-btn">
									<button type="button" class="btn btn-sm btn-white dropdown-toggle" data-toggle="dropdown"><i class="caret"></i></button>
									<ul class="dropdown-menu pull-right">
										<li data-value="1" data-selected="true"><a href="#">Item One</a></li>
										<li data-value="2"><a href="#">Item Two</a></li>
										<li data-value="3" data-fizz="buzz"><a href="#">Item Three</a></li>
										<li class="divider"></li>
										<li data-value="4"><a href="#">Item Four</a></li>
									</ul>
								</div>
							</div>
							<p>Select</p>
							<div id="mySelect" class="select btn-group m-b" data-resize="auto">
								<button type="button" data-toggle="dropdown" class="btn btn-white btn-sm dropdown-toggle"><span class="dropdown-label"></span><span class="caret"></span></button>
								<ul class="dropdown-menu">
									<li data-value="1" data-selected="true"><a href="#">Item One</a></li>
									<li data-value="2"><a href="#">Item Two</a></li>
									<li data-value="3" data-fizz="buzz"><a href="#">Item Three</a></li>
									<li class="divider"></li>
									<li data-value="4"><a href="#">Item Four</a></li>
								</ul>
							</div>
							<p>Spinner</p>
							<div id="MySpinner" class="spinner input-group m-b">
								<input type="text" class="input-sm spinner-input form-control" name="spinner" maxlength="3">
								<div class="btn-group btn-group-vertical input-group-btn">
									<button type="button" class="btn btn-white spinner-up"><i class="fa fa-chevron-up"></i></button>
									<button type="button" class="btn btn-white spinner-down"><i class="fa fa-chevron-down"></i></button>
								</div>
							</div>
							<p>Dropdown select</p>
							<div class="btn-group">
								<button data-toggle="dropdown" class="btn btn-sm btn-white dropdown-toggle"><span class="dropdown-label">Option1</span> <span class="caret"></span></button>
								<ul class="dropdown-menu dropdown-select">
									<li class="active"><a href="#">
										<input type="radio" name="d-s-r" checked="">Option1</a></li>
									<li><a href="#">
										<input type="radio" name="d-s-r">Option2</a></li>
									<li><a href="#">
										<input type="radio" name="d-s-r">Option3</a></li>
									<li class="disabled"><a href="#">
										<input type="radio" name="d-s-r" disabled="">I'm disabled</a></li>
								</ul>
							</div>
							<div class="btn-group">
								<button data-toggle="dropdown" class="btn btn-sm btn-white dropdown-toggle"><span class="dropdown-label" data-placeholder="Please select">Please select</span> <span class="caret"></span></button>
								<ul class="dropdown-menu dropdown-select">
									<li><a href="#">
										<input type="checkbox" name="d-s-c-1">Option1</a></li>
									<li><a href="#">
										<input type="checkbox" name="d-s-c-2">Option2</a></li>
									<li><a href="#">
										<input type="checkbox" name="d-s-c-3">Option3</a></li>
									<li><a href="#">
										<input type="checkbox" name="d-s-c-4">Option4</a></li>
									<li><a href="#">
										<input type="checkbox" name="d-s-c-5">Option5</a></li>
								</ul>
							</div>
							<div class="input-group m-b m-t">
								<input type="text" id="appendedInput" class="input-sm form-control">
								<div class="input-group-btn">
									<button class="btn btn-white btn-sm dropdown-toggle" data-toggle="dropdown"><span class="dropdown-label">USD</span> <span class="caret"></span></button>
									<ul class="dropdown-menu dropdown-select pull-right">
										<li class="active"><a href="#">
											<input type="radio" value="USD" name="pay_unit" checked="">USD</a> </li>
										<li><a href="#">
											<input type="radio" value="GBP" name="pay_unit">GBP</a> </li>
									</ul>
								</div>
							</div>
							<p>Pillbox</p>
							<div id="MyPillbox" class="pillbox clearfix m-b">
								<ul>
									<li class="label bg-default">Item One</li>
									<li class="label bg-success">Item Two</li>
									<li class="label bg-warning">Item Three</li>
									<li class="label bg-danger">Item Four</li>
									<li class="label bg-info">Item Five</li>
									<li class="label bg-success">Item Six</li>
									<li class="label bg-default">Item Seven</li>
									<input type="text" placeholder="add a pill">
								</ul>
							</div>
							<p>Datepicker</p>
							<div class="m-b row">
								<div class="col-lg-6">
									<input class="input-sm form-control datepicker" size="16" type="text" value="12-02-2013" data-date-format="dd-mm-yyyy">
								</div>
							</div>
							<p>Slider</p>
							<div class="m-b">
								<input class="slider" type="text" value="" data-slider-min="-20" data-slider-max="20" data-slider-step="1" data-slider-value="-14" data-slider-selection="after">
							</div>
							<p>Select2</p>
							<div class="m-b">
								<select id="select2-option" style="width: 260px">
									<optgroup label="Alaskan/Hawaiian Time Zone">
										<option value="AK">Alaska</option>
										<option value="HI">Hawaii</option>
									</optgroup>
									<optgroup label="Pacific Time Zone">
										<option value="CA">California</option>
										<option value="NV">Nevada</option>
										<option value="OR">Oregon</option>
										<option value="WA">Washington</option>
									</optgroup>
									<optgroup label="Mountain Time Zone">
										<option value="AZ">Arizona</option>
										<option value="CO">Colorado</option>
										<option value="ID">Idaho</option>
										<option value="MT">Montana</option>
										<option value="NE">Nebraska</option>
										<option value="NM">New Mexico</option>
										<option value="ND">North Dakota</option>
										<option value="UT">Utah</option>
										<option value="WY">Wyoming</option>
									</optgroup>
									<optgroup label="Central Time Zone">
										<option value="AL">Alabama</option>
										<option value="AR">Arkansas</option>
										<option value="IL">Illinois</option>
										<option value="IA">Iowa</option>
										<option value="KS">Kansas</option>
										<option value="KY">Kentucky</option>
										<option value="LA">Louisiana</option>
										<option value="MN">Minnesota</option>
										<option value="MS">Mississippi</option>
										<option value="MO">Missouri</option>
										<option value="OK">Oklahoma</option>
										<option value="SD">South Dakota</option>
										<option value="TX">Texas</option>
										<option value="TN">Tennessee</option>
										<option value="WI">Wisconsin</option>
									</optgroup>
									<optgroup label="Eastern Time Zone">
										<option value="CT">Connecticut</option>
										<option value="DE">Delaware</option>
										<option value="FL">Florida</option>
										<option value="GA">Georgia</option>
										<option value="IN">Indiana</option>
										<option value="ME">Maine</option>
										<option value="MD">Maryland</option>
										<option value="MA">Massachusetts</option>
										<option value="MI">Michigan</option>
										<option value="NH">New Hampshire</option>
										<option value="NJ">New Jersey</option>
										<option value="NY">New York</option>
										<option value="NC">North Carolina</option>
										<option value="OH">Ohio</option>
										<option value="PA">Pennsylvania</option>
										<option value="RI">Rhode Island</option>
										<option value="SC">South Carolina</option>
										<option value="VT">Vermont</option>
										<option value="VA">Virginia</option>
										<option value="WV">West Virginia</option>
									</optgroup>
								</select>
							</div>
							<div class="m-b">
								<input type="hidden" id="select2-tags" style="width: 260px" value="brown" />
							</div>
							<div class="dropfile visible-lg m-t block"><small>Drag and Drop file here</small> </div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
</section>
